<template>
	<view style="overflow: hidden;">
		<view class="flex-between-center examinee-bar" @click="toPage('/pages/examine/list')">
			<view style="width: 13%;position: relative;">
				<image style="width: 48rpx;height: 48rpx;position: relative;vertical-align: middle;" src="../../static/images/message3.svg" mode="">
				</image>
				<u-badge type="error" :count="examineTotal" size="mini"></u-badge>
			</view>
			<view style="width: 70%;" v-if="examineTotal">有<span style="color: #6397ec;">{{examineTotal}}</span>条待审核的处置申请</view>
			<view style="width: 70%;" v-else>暂无待审核的处置申请</view>
			<view style="width: 20%;text-align: right;"><image style="width: 14rpx;height: 28rpx;vertical-align: middle;" src="../../static/images/right.svg" mode=""></image></view>
		</view>
		<view class="index-wrap">
				<view class="title-tips flex-between" style="margin-top: 0;">
					<view class="tips">资产概览</view>
					<view class="search-btn">
					</view>
				</view>
				<view class="assets-info">
					<view class="pie">
						<canvas :canvas-id="pieCanvasId" :id="pieCanvasId" style="margin-top: 30rpx;width: 100%;height: 300rpx;background-color: linear-gradient(135deg, #1352F5 0%, #3176E3 100%);"></canvas>
						<view class="legend-wrap scroll_label" v-if="chartData.series.length">
							<view class="legend-item" v-for="(item, index) in chartData.series" :key="index">
								<view class="color" :style="`background-color: ${colors[index]};`"></view>
								<text class="name">{{item.name}}:</text>
								<text class="total">{{item.data}}</text>
							</view>
						</view>
						<view class="legend-wrap" style="right: 15%;" v-else>
							<view v-if="!chartData.series.length" style="padding-top: 50rpx;">
								<image style="width: 280rpx;height: 182rpx;vertical-align: middle;" src="../../static/images/non-assets.svg" mode=""></image>
							</view>
						</view>
					</view>
					<view class="assets-desc" v-if="chartData.series.length">
						您的{{assetsInfo.MonthIncrease.NewText}}月资产总数比{{assetsInfo.MonthIncrease.BeforeText}}月增加了{{assetsInfo.MonthIncrease.IncreaseCount}}件，同比去年增加{{assetsInfo.YearIncrease.Before === 0 ? "--" : assetsInfo.YearIncrease.IncreaseRate}}%。
					</view>
					<view class="assets-desc" v-else>
						主人您还没有资产，您可以用手持机录入。
					</view>
				</view>
				<view class="title-tips flex-between">
					<view class="tips">资产安全等级</view>
					<view class="risk-img">
						<image :src="alarmLevel === 0 ? '/static/images/risk_non.svg' : alarmLevel === 2 ? '/static/images/risk_middle.svg' : '/static/images/risk_high.svg'"></image>
					</view>
				</view>
				<view class="alarm-card" @click="toPage('/pages/alarm/index')">
					<view class="alarm-card-item">
						<view style="width: 13%;"><image src="../../static/images/alarm-card-1.svg"></image></view>
						<view style="font-size: 32rpx;
									width: 55%;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 600;
									color: #2A2A2A;">资产非法带出</view>
						<view style="width: 30%;text-align: right;">
							<span style="color: #4582e8;font-size: 32rpx;font-weight: 600;">{{alarmCounter.takeOut}}</span>
							<span>件</span>
						</view>
					</view>
					<view class="alarm-card-item">
						<view style="width: 13%;"><image src="../../static/images/alarm-card-2.svg"></image></view>
						<view style="font-size: 32rpx;
									width: 55%;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 600;
									color: #2A2A2A;">资产转移超时</view>
						<view style="width: 30%;text-align: right;">
							<span style="color: #4582e8;font-size: 32rpx;font-weight: 600;">{{alarmCounter.transferTimeout}}</span>
							<span>件</span>
						</view>
					</view>
					<view class="alarm-card-item">
						<view style="width: 13%;"><image src="../../static/images/alarm-card-3.svg"></image></view>
						<view style="font-size: 32rpx;
									width: 55%;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 600;
									color: #2A2A2A;">设备故障</view>
						<view style="width: 30%;text-align: right;">
							<span style="color: #4582e8;font-size: 32rpx;font-weight: 600;">{{alarmCounter.deviceFault}}</span>
							<span>件</span>
						</view>
					</view>
					<view class="alarm-tips" v-html="alarmTips"></view>
				</view>
				<view class="title-tips flex-between">
					<view class="tips">
						盘点报告
						<view class="dot" v-show="!lastReport.IsRead && lastReport.Guid"></view>
					</view>
					<view class="">
					</view>
				</view>
				<view class="report" @click="toReport" v-if="lastReport.Guid">
					<view class="flex-between" style="font-size: 24rpx;height: 60rpx;">
						<view style="color: #333333;max-width: 50%;" class="text-ellipsis">{{lastReport.OrgName}}</view>
						<view style="color: #999999;">盘点时间：{{lastReport.FinishTime | dateFormat}}</view>
					</view>
					<view class="flex-between-center" style="height: 100rpx;">
						<view style="width: 13%;"><image style="width: 56rpx;height: 56rpx;" src="../../static/images/subtype.png" mode=""></image></view>
						<view style="width: 60%;font-size: 32rpx;color: #2A2A2A;font-weight: 600;">总资产数</view>
						<view style="width: 25%;text-align: right;color: #4582e8;"><span style="font-size: 32rpx;">{{lastReport.TotalNum}}</span><span style="font-size: 24rpx;">件</span></view>
					</view>
					<view class="flex-between-center" style="color: #666666;font-size: 24rpx;height: 60rpx;border-bottom: 2rpx solid #ECECF0;">
						<view>实际盘点数<span style="color: #2A2A2A;margin-left: 10rpx;font-weight: 600;">{{lastReport.RealNum}}</span></view>
						<view>盘盈数<span style="color: #31B027;margin-left: 10rpx;">+{{lastReport.IncreaseNum}}</span></view>
						<view>盘亏数<span style="color: #E55D5D;margin-left: 10rpx;">-{{lastReport.LackNum}}</span></view>
					</view>
					<view class="flex-between" style="font-size: 24rpx;color: #E55D5D;height: 60rpx;padding-top: 10rpx;">
						<view v-if="lastReport.TotalNum === lastReport.RealNum" style="">您的资产盘点结果与账面完全一致，你简直就是资产管理专家</view>
						<view v-else="lastReport">您的资产数量有差错，请尽快检查</view>
						<view><image style="width: 10rpx;height: 20rpx;" src="../../static/images/right.svg" mode=""></image></view>
					</view>
				</view>
				<view class="report" v-else>
					<view class="non-report">
						<view class="">
							<image src="../../static/images/non-report.svg" mode=""></image>
						</view>
						<view style="padding-top: 40rpx;">{{reportPrompt}}</view>
					</view>
				</view>
			</view>
	</view>
	
</template>

<script>
	import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js'
	export default {
		data() {
			return {
				assetsInfo: {MonthIncrease: {}, YearIncrease: {}},
				alarmInfo: {},
				lastReport: {},
				chartData: {series: []},
				pieCanvasId: "canvasPie",
				colors: ['#55D8C9', '#4172DE', '#6FE7FF', '#16EE98', '#E55D5D', '#FF81BD', '#EB8744', '#F2BB35', '#5EB2FF', '#8159FF', "#d101fd", "#b85503", "#5739a4", "#6c32ef", "#c074c5", "#41ef15", "#19a20f", "#6e3723", "#564bda", "#6bb376", "#087a10", "#f434ab", "#23c7c6", "#8c3483", "#6406f8", "#a69c6f", "#21476f", "#74be68", "#36cf4e", "#4b26e3", "#0df79e", "#210ac6", "#ad0843", "#267d7d", "#349473", "#039646", "#cc8f27", "#02c8f0", "#75b9de", "#6961f3", "#b84342", "#219b86", "#5d49fb", "#761a92", "#226ebc", "#0ee469", "#5ca356", "#d159a8", "#f97635", "#9c231c", "#af0287", "#2846de", "#4da137", "#6c4739", "#4ae91c", "#a4a909", "#7c16de", "#22d969", "#f035b0", "#3a3aa2", "#1780d9", "#773de7", "#039dd7", "#542285", "#a8a8c2", "#79933b", "#58476a", "#b20761", "#be5042", "#0842d8", "#1e03d3", "#3f4a82", "#3ce157", "#6d52e7", "#4d81dd", "#8ad64c", "#6f893b", "#540c4a", "#611acb", "#b341a8", "#3fdd80", "#4a4f4e", "#e24876", "#a85918", "#a28026", "#2a40cf", "#94c2ab", "#119f3b", "#b9323c", "#1641ab", "#7d6263", "#25ff79", "#31cc99", "#3732dd", "#e88a9d", "#f52830", "#3dcb2a", "#30f339", "#c7b93a", "#ba8b51", "#523db5", "#c42700", "#4f1b0f", "#6b3732", "#b07bba", "#d87093", "#af2b72", "#4481f3"],
				alarmLevel: 0,  // 0表示安全   2 表示中危  3 表示高危
				alarmCounter: {
					takeOut: 0,
					transferTimeout: 0,
					deviceFault: 0
				},
				examineTotal: 0,
				reportPrompt: "",
			}
		},
		onLoad() {
			
		},
		computed: {
			alarmTips() {
				let message = "您的资产非常安全，放心享受生活";
				let color = "#999999";
				if (this.alarmCounter.deviceFault > 0) {
					color = "#e55d5d";
					message = "您的资产安全受到威胁，请及时查明资产情况、保证设备正常。";
				} else {
					if (this.alarmCounter.takeOut + this.alarmCounter.transferTimeout > 0) {
						color = "#e55d5d";
						message = "您的资产安全受到威胁，请及时查明资产情况，保证资产安全。";
					}
				}
				return `<span style="color: ${color}">${message}</span>`;
			}
		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url
				});
			},
			
			toAssetsDetail() {
				uni.navigateTo({
					url: '/pages/manage/itemAssetDetail'
				})
			},
			toHandlerAssetsDetail() {
				uni.navigateTo({
					url: '/pages/handle/itemAssetHandleDetail'
				})
			},
			toSpeech() {
				uni.navigateTo({
					url: '/pages/speech/speech'
				})
			},
			toReport() {
				if (!this.lastReport.IsRead) {
					this.$api.readReport({"IsRead": 1, "Guid": this.lastReport.NotifyGuid});
				}
				this.toPage(`/pages/report/report?reportId=${this.lastReport.Guid}`);
			},
			genColors() {
				let colors = [];
				let i;
				for(i = 0; i < 99; ++i) {
					let r = Math.floor(Math.random()*256);
					let g = Math.floor(Math.random()*256);
					let b = Math.floor(Math.random()*256);
					let test = 0.299 * r + 0.587 * g + 0.114 * b;
					if (test > 180) {
						i--;
					} else {
						colors.push(`#${this.toHex(r)}${this.toHex(g)}${this.toHex(b)}`);
					}
				}
				console.log(colors);
				return colors;
			},
			toHex(n) {
				let N = n.toString(16);
				if (N.length < 2) {
					N = "0" + N;
				}
				return N;
			}
		},
		onShow() {

			// 未登录用户跳转
			if (uni.getStorageSync('TOKEN') == '') {
				return this.$store.dispatch('toLogin')
			}
			
			// 获取资产概览
			this.$api.getUserAssetsInfo().then(res => {
				
				this.assetsInfo = res.data;
				this.chartData.series = res.data.AssetTypeGrop.map(item => ({"name": item.TypeText, "data": item.Count}));
				new uCharts({
					$this:this,
					canvasId: this.pieCanvasId,
					type: 'ring',
					fontSize:14,
					colors: this.colors,
					legend:{
					    show:false
					},
					title: {
						name: this.assetsInfo.AssetTotle || '0',
						color: "#FFFFFF",
						fontSize: 16,
						offsetY: -10,
					},
					subtitle: {
						name: "总资产",
						color: "#FFFFFF",
						fontSize: 16
					},
					background:'#1352F5',
					pixelRatio:1,
					series: this.chartData.series.length ? this.chartData.series : [{'data': 1}],
					animation: false,
					width: uni.upx2px(600),
					height: uni.upx2px(300),
					disablePieStroke: true,
					dataLabel: false,
					padding: [0, 100, 0, 0],
					extra: {
						pie: {
						  ringWidth: 20,
						}
					},

				});
			});
			// 获取报警信息
			this.$api.getUserAssetsAlarmInfo().then(res => {
				this.alarmInfo = res.data;
				this.alarmLevel = 0;
				this.alarmCounter = {
					takeOut: 0,
					transferTimeout: 0,
					deviceFault: 0
				};
				res.data.forEach(item => {
					// 非法带出，高危
					if (item.AlarmType === 'FASG_WARNING_TYPE_0001') {
						this.alarmLevel = 3;
						this.alarmCounter.takeOut = item.AlarmCount;
					}
					// 设备故障，高危
					if (item.AlarmType === 'FASG_WARNING_TYPE_0002') {
						this.alarmLevel = 3;
						this.alarmCounter.deviceFault = item.AlarmCount;
					}
					// 转移超时，中危
					if (item.AlarmType === 'FASG_WARNING_TYPE_0003') {
						if (this.alarmLevel < 3) {
							this.alarmLevel = 2;
						}
						this.alarmCounter.transferTimeout = item.AlarmCount;
					}
				});
			});
			// 获取盘点报告
			this.$api.getUserLastReport().then(res => {
				uni.hideToast();
				this.lastReport = res.data || {};
				if (!res.data) {
					this.$api.getUserInfo().then(resp => {
						let createdTime = resp.data.User.CreateTime;
						if ((createdTime + 1000 * 60 * 60 * 24 * 180) > new Date().getTime()) {
							this.reportPrompt = "您的资产还未进行盘点，暂无报告";
						} else {
							this.reportPrompt = "您的资产已经超过181天未盘点，请定期盘点资产，保证资产安全";
						}
					})
				}
			});
			// 获取待审核数量
			this.$api.getExamineList({"PageIndex": 1, "PageSize": 1, "ApproveStates": ["ASSET_APPROVE_0001"]}).then(res => {
				this.examineTotal = res.data.Total;
			});
		}
	}
</script>

<style lang="scss" scoped>
	.examinee-bar {
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 2rpx;
		line-height: 100rpx;
		padding: 0 40rpx;
		margin-top: 60rpx;
	}
	.index-wrap {
		padding: 40rpx;
		min-height: 100vh;
		background: #F7FAFF;

		.title-tips {
			margin: 40rpx 0 20rpx;
			.tips {
				position: relative;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #2A2A2A;
				.dot {
					position: absolute;
					width: 15rpx;
					height: 15rpx;
					top: 0;
					right: -6rpx;
					background-color: red;
					border-radius: 50%;
				}
			}
			.search-btn {
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
			.risk-img {
				// padding-top: 10rpx;
				margin-top: 6rpx;
				width: 120rpx;
				image {
					width: 120rpx;
					height: 40rpx;
				}
			}
		}
		.alarm-card {
			width: 100%;
			height: 540rpx;
			background: #FFFFFF;
			box-shadow: 0px 4px 12px 0px rgba(61, 76, 98, 0.12);
			border-radius: 4px;
			padding: 0 30rpx;
			.alarm-card-item {
				width: 100%;
				height: 136rpx;
				line-height: 136rpx;
				border-bottom: 2rpx solid #ECECF0;
				display: flex;
				flex-wrap: wrap;
				image {
					width: 56rpx;
					height: 56rpx;
					vertical-align: middle;
				}
			}
			.alarm-tips {
				padding: 10rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #E55D5D;
				margin-top: 20rpx;
			}
		}
		.assets-info {
			width: 100%;
			background: linear-gradient(135deg, #1352F5 0%, #3176E3 100%);
			box-shadow: 0px 4px 8px 0px rgba(46, 51, 57, 0.1);
			border-radius: 4px;
			overflow: hidden;
			.pie {
				position: relative;
				background: linear-gradient(135deg, #1352F5 0%, #3176E3 100%);
				.legend-wrap {
					overflow-x: hidden;
					overflow-y: auto;
					position: absolute;
					width: 30%;
					height: 260rpx;
					top: 20rpx;
					right: 10%;
					.legend-item {
						display: flex;
						flex-wrap: wrap;
						height: 40rpx;
						width: 100%;
						margin: 20rpx 0;
						.color {
							width: 20rpx;
							height: 20rpx;
							border-radius: 4rpx;
							line-height: 40rpx;
							margin-top: 10rpx;
							margin-right: 10rpx;
						}
						.name {
							width: 50%;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							line-height: 40rpx;
							color: #FFFFFF;
						}
						.total {
							width: 30%;
							font-size: 32rpx;
							font-family: Roboto-Bold, Roboto;
							font-weight: bold;
							color: #FFFFFF;
							line-height: 40rpx;
						}
			
					}
				}
			}
			.assets-desc {
				width: 100%;
				height: 120rpx;
				background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%);
				box-shadow: 0px 4px 8px 0px rgba(46, 51, 57, 0.1);
				border-radius: 4px;
				color: #999999;
				padding: 20rpx 20rpx 0;
			}
		}
		.alarm-info {
			width: 100%;
			height:  160rpx;
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;
			.alarm-item {
				width: 30%;
				height: 160rpx;
				padding: 20rpx;
				color: #FFFFFF;
				border-radius: 4px;
				image {
					width: 48rpx;
					height: 48rpx;
					vertical-align: middle;
				}
			}
		}
		.report {
			width: 100%;
			height: 328rpx;
			padding: 20rpx;
			background: #FFFFFF;
			box-shadow: 0px 4px 12px 0px rgba(61, 76, 98, 0.12);
			border-radius: 4px;
			.non-report {
				margin-top: 60rpx;
				margin-left: 8%;
				display: flex;
				height: 152rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				image {
					width: 166rpx;
					height: 152rpx;
					vertical-align: middle;
				}
			}
		}
	
		.scroll_label{
			/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
			  &::-webkit-scrollbar {  
			      width: 6rpx;  
			      height: 6rpx;  
			      background-color: #FFFFFF;  
			  }  
			  /*定义滚动条轨道 内阴影+圆角*/  
			  &::-webkit-scrollbar-track {  
			      border-radius: 6rpx;  
			      background-color: #F6F8FB;  
			  }
			  /*定义滑块 内阴影+圆角*/  
			  &::-webkit-scrollbar-thumb {  
			      border-radius: 6rpx;  
			      background-color: #cfcfcf; // 滚动条颜色
			  }  
		}
	}
</style>
